<script setup lang="ts">
import { onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
let headWidth = document.body.offsetWidth
//----------------------------------------------------------
/*
   logoWidth.value = 136
    logoHeight.value = 40
    titleWidth.value = 306
    titleHeight.value = 50
    introduceWidth.value = 146
    introduceHeight.value = 35
*/
const logoWidth = ref(136)
const logoHeight = ref(40)
const titleWidth = ref(306)
const titleHeight = ref(50)
const introduceWidth = ref(146)
const introduceHeight = ref(35)
//----------------------------------------------------------
// const logoStyle = computed(() => ({
//   width: '${logoWidth.value}px',
//   height: '${logoHeight.value}px',
// }))
// const titleStyle = computed(() => ({
//   width: '${titleWidth.value}px',
//   height: '${titleHeight.value}px',
// }))
// const introduceStyle = computed(() => ({
//   width: '${introduceWidth.value}px',
//   height: '${introduceHeight.value}px',
// }))
//----------------------------------------------------------

onMounted(() => {
  headWidth = document.body.offsetWidth
  console.log('宽度[onMounted]----' + headWidth)
  window.addEventListener('resize', resizeListener)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeListener)
})

onUpdated(() => {
  headWidth = document.body.offsetWidth
  console.log('宽度[onUpdated]----' + headWidth)
})

function resizeListener() {
  headWidth = document.body.offsetWidth
  console.log('宽度[resizeListener]----' + headWidth)
  //
  if (headWidth < 490) {
    logoWidth.value = headWidth * 0.34
    logoHeight.value = headWidth * 0.1
    titleWidth.value = headWidth * 0.75
    titleHeight.value = headWidth * 0.125
    introduceWidth.value = headWidth * 0.365
    introduceHeight.value = headWidth * 0.0875
  } else {
    logoWidth.value = 136
    logoHeight.value = 40
    titleWidth.value = 306
    titleHeight.value = 50
    introduceWidth.value = 146
    introduceHeight.value = 35
  }
  // 动态计算，得到的宽高
  console.log(
    '宽高[resizeListener]----' +
    logoWidth.value +
    '-' +
    logoHeight.value +
    '**' +
    titleWidth.value +
    '-' +
    titleHeight.value +
    '**' +
    introduceWidth.value +
    '-' +
    introduceHeight.value +
    '-',
  )
}
</script>

<template>
  <div class="top-head-bg">
    <div class="top-head">
      <img alt="Vue logo" class="top-logo1" :style="{ width: logoWidth + 'px', height: logoHeight + 'px' }"
        src="@/assets/logo.svg" />
      <label class="top-label1"></label>
      <img alt="Vue logo" class="top-logo2" :style="{ width: titleWidth + 'px', height: titleHeight + 'px' }"
        src="@/assets/logo.svg" />
      <label class="top-label2"></label>
      <img alt="Vue logo" class="top-logo3" :style="{ width: introduceWidth + 'px', height: introduceHeight + 'px' }"
        src="@/assets/logo.svg" />
    </div>
  </div>
</template>

<style scoped>
.top-head {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* 横向居中对其 */
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.top-logo1 {
  width: 136px;
  height: 40px;
  background-color: blueviolet;
}

.top-label1 {
  width: 16px;
}

.top-logo2 {
  width: 306px;
  height: 50px;
  background-color: cadetblue;
}

.top-label2 {
  flex: 1;
}

.top-logo3 {
  width: 146px;
  height: 35px;
  background-color: darksalmon;
}

/* min-width 指定的是，当宽度>=1024px时，需要应用的样式 */
@media (min-width: 1024px) {
  .top-head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* 横向居中对其 */
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .top-logo1 {
    width: 136px;
    height: 40px;
    background-color: blueviolet;
  }

  .top-label1 {
    width: 16px;
  }

  .top-logo2 {
    width: 306px;
    height: 50px;
    background-color: cadetblue;
  }

  .top-label2 {
    flex: 1;
  }

  .top-logo3 {
    width: 146px;
    height: 35px;
    background-color: darksalmon;
  }
}

/* max-width 指定的是，当宽度<=490px时，需要应用的样式 */
@media (max-width: 490px) {
  .top-head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* 横向居中对其 */
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .top-logo1 {
    width: 136px;
    height: 40px;
    background-color: blueviolet;
  }

  .top-label1 {
    width: 16px;
    display: none;
  }

  .top-logo2 {
    width: 306px;
    height: 50px;
    background-color: cadetblue;
  }

  .top-label2 {
    flex: 1;
    display: none;
  }

  .top-logo3 {
    width: 146px;
    height: 35px;
    background-color: darksalmon;
  }
}

/* ******************************************************************* */
/* 浅色模式下显示的背景 */
.top-head-bg {
  background-color: white;
}

/* 深色模式下显示的背景 */
@media (prefers-color-scheme: dark) {
  .top-head-bg {
    background-color: black;
  }
}
</style>
